<template>
  <div class="research-team-page">
    <!-- 页面标题区域 -->
    <div class="page-header animate-on-scroll">
      <div class="header-content">
        <h1 class="page-title">团队介绍</h1>
        <div class="title-underline"></div>
        <p class="page-subtitle">Research Team</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="container">
      <!-- 主任区域 -->
      <div class="section-title animate-on-scroll">
        <h2>主任</h2>
        <div class="section-divider"></div>
      </div>

      <div class="team-members-grid">
        <div
          class="teacher-card animate-on-scroll"
          v-for="(teacher, index) in teachers"
          :key="index"
          @click="goTo('/researchTeam/teacherZhang')"
          style="cursor: pointer"
          :data-delay="index * 100"
        >
          <!-- 主任卡片内容 -->
          <div class="member-avatar">
            <img :src="teacher.photo" alt="教师头像" />
          </div>
          <div class="member-info">
            <h3 class="member-name">{{ teacher.name }}</h3>
            <p class="member-title">{{ teacher.title }}</p>
            <div class="member-details">
              <div class="detail-item">
                <!-- 精美邮箱图标 -->
                <svg class="email-icon" viewBox="0 0 1024 1024" width="25" height="25">
                  <path
                    d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 110.8L553.1 512 888 753.2V270.8zM96 253.2 430.9 512 96 753.2V253.2z m42.8 529.1L473.8 512 138.8 241.9h746.3L550.2 512l335 270.1H138.8z"
                    fill="#ffffff"
                  ></path>
                </svg>
                <!-- <span class="detail-label">邮箱: </span> -->
                <span class="detail-value">{{ teacher.contact }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 部门主要成员区域 -->
      <div class="section-title animate-on-scroll">
        <h2>部门主要成员</h2>
        <div class="section-divider"></div>
      </div>
      <div class="department-main-members">
        <div
          class="member-card animate-on-scroll"
          v-for="(member, index) in members"
          :key="index"
          @click="goTo(member.routePath)"
          style="cursor: pointer"
          :data-delay="index * 100"
        >
          <!-- 成员卡片内容 -->
          <div class="member-avatar">
            <img :src="member.photo" alt="成员头像" />
          </div>
          <div class="member-info">
            <h3 class="member-name">{{ member.name }}</h3>
            <p class="member-title">{{ member.title }}</p>
            <div class="member-details">
              <div class="detail-item">
                <!-- 精美邮箱图标 -->
                <!-- <svg class="email-icon" viewBox="0 0 1024 1024" width="25" height="25">
                  <path
                    d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 110.8L553.1 512 888 753.2V270.8zM96 253.2 430.9 512 96 753.2V253.2z m42.8 529.1L473.8 512 138.8 241.9h746.3L550.2 512l335 270.1H138.8z"
                    fill="#ffffff"
                  ></path>
                </svg> -->
                <!-- <span class="detail-label">邮箱:</span> -->
                <span class="detail-value">{{ member.contact }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 研究生展示区域 -->
      <div class="section-title animate-on-scroll">
        <h2>硕士研究生</h2>
        <div class="section-divider"></div>
      </div>
      <div class="team-members-grid">
        <div class="member-card animate-on-scroll" v-for="(item, index) in list" :key="index" :data-delay="index * 100">
          <!-- 研究生卡片内容 -->
          <div class="member-avatar">
            <img :src="item.photo" alt="研究生头像" />
          </div>
          <div class="member-info">
            <h3 class="member-name">{{ item.name }}</h3>
            <p class="stu-title">{{ item.major }}</p>
            <p class="detail-label">
              <!-- 精美邮箱图标 -->
              <!-- <svg class="email-icon" viewBox="0 0 1024 1024" width="25" height="25">
                <path
                  d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 110.8L553.1 512 888 753.2V270.8zM96 253.2 430.9 512 96 753.2V253.2z m42.8 529.1L473.8 512 138.8 241.9h746.3L550.2 512l335 270.1H138.8z"
                  fill="#ffffff"
                ></path>
              </svg> -->
              {{ item.contact }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResearchTeam',
  data() {
    return {
      // 教师数据
      teachers: [
        {
          id: 1,
          name: '张鹏',
          title: '主任',
          contact: 'wind82465@yeah.net',
          photo: require('@/assets/img/zhangpeng.png')
        },
      ],
      // 部门成员数据
      members: [
        {
          id: 1,
          name: '董克',
          title: '人工智能专家',
          // contact: 'dongke@china213.net',
          photo: require('@/assets/img/dongke.jpg'),
          routePath: '/researchTeam/213Dongke'
        },
        {
          id: 2,
          name: '赵新蕾',
          title: '学术负责人',
          // contact: '782049502@qq.com',
          photo: require('@/assets/img/zhaoxinlei.jpg'),
          routePath: '/researchTeam/213Zhaoxinlei'
        },
        {
          id: 3,
          name: '李志超',
          title: '系统架构师',
          // contact: 'lizhichao@china213.net',
          photo: require('@/assets/img/lizhichao.png'),
          routePath: '/researchTeam/213Lizhichao'
        },
        {
          id: 4,
          name: '董力嘉',
          title: '算法架构师',
          // contact: '1134632781@qq.com',
          photo: require('@/assets/img/donglijia.jpg'),
          routePath: '/researchTeam/213Donglijia'
        },

      ],
      // 研究生数据
      list: [
        { id: 1, name: '徐红珂', major: '计算机科学与技术', photo: require('@/assets/img/xvhongke.jpg'), contact: '2025级' },
        { id: 2, name: '段华彬', major: '计算机科学与技术', photo: require('@/assets/img/duanhuabin.jpg'), contact: '2025级' },
        { id: 3, name: '刘振', major: '计算机技术', photo: require('@/assets/img/liuzhen.jpg'), contact: '2025级' },
        { id: 4, name: '张潇', major: '大数据技术与工程', photo: require("@/assets/img/zhangxiao.jpg"), contact: '2024级' },
        { id: 5, name: '韩怀非', major: '大数据技术与工程', photo: require('@/assets/img/hanhuaifei.jpg'), contact: '2024级' },
        { id: 6, name: '高嘉', major: '计算机技术', photo: require('@/assets/img/gaojia.jpg'), contact: '2024级' },
        { id: 7, name: '薛翔鸣', major: '计算机技术', photo: require('@/assets/img/xuexiangming.jpg'), contact: '2024级' },
      ]
    }
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    // 检查元素是否在视口中
    isInViewport(element) {
      const rect = element.getBoundingClientRect();
      return (
        rect.top <= (window.innerHeight || document.documentElement.clientHeight) * 0.85 &&
        rect.bottom >= 0
      );
    },
    // 处理滚动动画
    handleScrollAnimation() {
      const elements = document.querySelectorAll('.animate-on-scroll');
      elements.forEach(element => {
        if (this.isInViewport(element) && !element.classList.contains('animated')) {
          const delay = element.getAttribute('data-delay') || 0;
          setTimeout(() => {
            element.classList.add('animated');
          }, delay);
        }
      });
    }
  },
  mounted() {
    // 初始检查一次
    this.handleScrollAnimation();
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScrollAnimation);
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('scroll', this.handleScrollAnimation);
  }
}
</script>

<style scoped>
.research-team-page {
  min-height: calc(100vh - 160px);
  background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%);
  /* 新增：让背景图覆盖整个容器，不重复 */
  background-size: cover; /* 覆盖容器，可能裁剪边缘，适合大尺寸图 */
  /* 或用 background-size: contain;
  background-repeat: no-repeat; /* 禁止重复平铺，避免拼接竖线复制 */
  background-position: center; /* 图片居中显示 */
  padding: 0px 0 40px;
}

/* 滚动动画样式 */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

.page-header {
  color: white;
  padding: 0;
  margin-bottom: 10px;
}

.header-content {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
  text-align: center;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0px;
  margin-top: 0px;
  /* 新增：渐变色背景 + 文字裁剪 */
  background: linear-gradient(90deg, #6a11cb, #9f05dbbc); /* 从紫到蓝的渐变，可自定义颜色 */
  -webkit-background-clip: text; /* 仅在文字区域显示背景（兼容webkit内核浏览器） */
  background-clip: text;
  color: transparent; /* 文字本身透明，露出背景渐变 */
}

.title-underline {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00c9ff, #92fe9d);
  margin: 0 auto 20px;
  border-radius: 2px;
}

.page-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto;
  background: linear-gradient(90deg, #6a11cb, #9f05dbbc); /* 从紫到蓝的渐变，可自定义颜色 */
  -webkit-background-clip: text; /* 仅在文字区域显示背景（兼容webkit内核浏览器） */
  background-clip: text;
  color: transparent; /* 文字本身透明，露出背景渐变 */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  text-align: center;
  margin: 40px 0 25px;
}

.section-title h2 {
  font-size: 1.8rem;
  /* 新增：渐变色背景 + 文字裁剪 */
  background: linear-gradient(90deg, #6a11cb, #9f05dbbc); /* 从紫到蓝的渐变，可自定义颜色 */
  -webkit-background-clip: text; /* 仅在文字区域显示背景（兼容webkit内核浏览器） */
  background-clip: text;
  color: transparent; /* 文字本身透明，露出背景渐变 */
  margin-bottom: 10px;
}

.section-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #11998e, #38ef7d);
  margin: 0 auto;
  border-radius: 3px;
}

.team-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 与竖向卡片宽度匹配 */
  gap: 25px; /* 增大间距，避免竖向卡片拥挤 */
  margin-bottom: 40px;
}

/* 针对部门主要成员的特定样式 */
.department-main-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 按卡片宽度自适应列数 */
  gap: 25px; /* 卡片间距保持 */
  margin-bottom: 40px;
  width: 100%; /* 占满容器宽度 */
  margin-left: 0; /* 取消左侧固定margin */
}

.teacher-card {
  background-image: url("@/assets/img/background.jpg");
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column; /* 关键：竖向排列 */
  align-items: center; /* 内容水平居中 */
  min-width: auto; /* 取消固定最小宽 */
  width: 280px; /* 竖向卡片建议宽度（可根据需求调整） */
  margin: 0 auto; /* 水平居中，取消左侧固定margin */
}

.teacher-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.member-card {
  background-image: url("@/assets/img/background.jpg");
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column; /* 关键：竖向排列 */
  align-items: center; /* 内容水平居中 */
  width: 280px; /* 与主任卡片统一宽度 */
  opacity: 0.9;
}

.member-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.member-avatar {
  width: 100%; /* 占满卡片宽度 */
  padding: 20px 0; /* 上下padding，取消左右padding */
  display: flex;
  justify-content: center; /* 头像水平居中 */
}

.member-avatar img {
  width: 120px;
  height: 120px;
  border-radius: 50%; /* 圆形头像（替换原20px圆角） */
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.8); /* 白色边框增强视觉 */
}

.avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #11998e, #38ef7d);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
}

.member-info {
  flex: 1; /* 占满剩余高度，让信息区垂直分布均匀 */
  padding: 0 20px 20px; /* 仅上下padding，取消左侧padding */
  text-align: center; /* 文字水平居中（贴合image.png效果） */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.member-name {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 12px; /* 减小底部间距 */
  color: #fff;
}

.stu-title {
  color: #0ce3eb;
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 15px;
}

.member-title {
  color: #0ce3eb;
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 15px;
}

.member-details {
  font-size: 0.9rem;
}

.detail-item {
  display: flex;
  justify-content: center; /* 邮箱水平居中 */
  align-items: center;
  margin-bottom: 8px;
  width: 100%;
}

.detail-label {
  font-weight: 500;
  color: #fff;
  min-width: 45px;
  display: flex;
  align-items: center;
  margin-right: 5px;
}

.detail-value {
  color: #fff;
  text-align: center;
  white-space: nowrap; /* 防止文字换行 */
}

/* 精美邮箱图标样式 */
.email-icon {
  margin-right: 5px;
  vertical-align: middle;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }

  .team-members-grid {
    grid-template-columns: 1fr;
  }

  .teacher-card {
    flex-direction: column;
    text-align: center;
    margin-left: auto;
    min-width: auto;
  }

  .member-card {
    flex-direction: column;
    text-align: center;
  }

  .teacher-card,
  .member-card {
    width: 100%;
    max-width: 320px; /* 移动端最大宽度，避免过宽 */
  }

  .team-members-grid,
  .department-main-members {
    grid-template-columns: 1fr;
  }

  .member-name {
    font-size: 1.2rem;
  }
  .member-title {
    font-size: 0.95rem;
  }

  .member-avatar {
    width: 100%;
    padding-bottom: 0;
  }

  .member-info {
    padding: 0 20px 20px;
  }

  .detail-item {
    flex-direction: column;
    gap: 3px;
  }

  .department-main-members {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px; /* 减小间距，比如改为15px */
    margin-bottom: 40px;
    width: 100%;
  }
}
</style>